import React, { useRef, useState, useLayoutEffect } from 'react'; 
 
export default()=>{
    const divRef = useRef(null);
    const [height,setHeight] = useState(30);

    useLayoutEffect(() => {
        //DOM 更新完成后打印出 div 的高度
        console.log('useLayoutEffect: ', divRef.current.clientHeight);
    })

    return (
        <>
            <div ref={ divRef } style={{background:'red',height:height}}>hello</div>
            <button onClick={ () => setHeight(height+50)}>改变div高度</button>
        </>
    )
 }